<template>
  <Modal
    v-model="showModal"
    title="个人中心"
    width="1000"
    footer-hide
    class="main-form-modal self-settings-modal"
    :mask-closable="false"
    @on-cancel="cancelModal('selfForm')">
    <div class="set-panel">
      <!-- 设置选项 -->
      <div class="self-set-list set-options">
        <div v-for="(item) in setTabsOptions" :key="item.key" :class="['self-set-list-item', settingsTabs === item.key ? 'active' : '']" @click="setTabs(item)">
          <div class="self-set-list-item-title">{{item.label}}</div>
          <div class="self-set-list-item-desc">{{item.desc}}</div>
        </div>
        <!-- <div class="self-set-list-item">
          <div class="self-set-list-item-title">基本设置</div>
          <div class="self-set-list-item-desc">个人账户信息设置</div>
        </div>
        <div class="self-set-list-item">
          <div class="self-set-list-item-title">安全设置</div>
          <div class="self-set-list-item-desc">个人账户密码设置</div>
        </div> -->
      </div>

      <!-- 设置内容 -->
      <div class="set-content">
        <div v-if="settingsTabs === 'base'">
          <div class="set-block">
            <div class="main-title">基本设置</div>
            <div class="main-title-desc">个人账户信息设置</div>
            <Form class="settings-form" ref="selfForm" :model="selfForm" :rules="selfFormRules" label-position="top" @keydown.enter.native.prevent="() => {}">
              <FormItem label="账号：" prop="userAccount">
                <div class="desc-cont">
                  <span class="desc-main-cont">{{selfForm.userAccount}}</span>
                </div>
              </FormItem>
              <FormItem label="用户名：" prop="userName">
                <Input v-model="selfForm.userName" placeholder="请输入用户名" :maxlength="32"></Input>
              </FormItem>
              <div>
                <Button type="primary" @click="saveFormData('selfForm')">更新个人信息</Button>
              </div>
            </Form>
          </div>
        </div>

        <div v-if="settingsTabs === 'security'">
          <div class="set-block">
            <div class="main-title">安全设置</div>
            <div class="main-title-desc">密码设置</div>
            <div class="security-panel">
              <div class="security-panel-item">
                <div class="security-panel-item-title">账号密码</div>
                <div class="security-panel-item-content">
                  <span class="security-panel-item-desc">建议定期修改密码，账号更安全。</span>
                  <span class="btn-group">
                    <link-btn type="info" @click="showPwdForm">修改</link-btn>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码表单 -->
    <password-form :toggle.sync="showPwdFormModal"></password-form>

    <!-- 设置选项 -->
    <!-- <Tabs v-model="settingsTabs" v-if="showModal">
      <Tab-pane label="基本设置" name="base">
        <div class="set-block">
          <div class="main-title">基本设置</div>
          <div class="main-title-desc">个人账户信息设置</div>
          <Form class="settings-form" ref="selfForm" :model="selfForm" :rules="selfFormRules" label-position="top">
            <FormItem label="账号：" prop="userAccount">
              <div class="desc-cont">
                <span class="desc-main-cont">{{selfForm.userAccount}}</span>
              </div>
            </FormItem>
            <FormItem label="用户名：" prop="userName">
              <Input v-model="selfForm.userName" placeholder="请输入用户名" :maxlength="32"></Input>
            </FormItem>
            <div>
              <Button type="primary" @click="saveFormData('selfForm')">更新个人信息</Button>
            </div>
          </Form>
        </div>
      </Tab-pane>
      <Tab-pane label="安全设置" name="security">
        <div class="set-block">
          <div class="main-title">安全设置</div>
          <div class="main-title-desc">密码设置</div>
          <div class="security-panel">
            <div class="security-panel-item">
              <div class="security-panel-item-title">账号密码</div>
              <div class="security-panel-item-content">
                <span class="security-panel-item-desc">建议定期修改密码，账号更安全。</span>
                <span class="btn-group">
                  <link-btn type="info">修改</link-btn>
                </span>
              </div>
            </div>
          </div>
        </div>
      </Tab-pane>
    </Tabs> -->
    </div>
  </Modal>
</template>

<script>
import LinkBtn from '_c/link-btn'
// import { accountMgtUpdate } from '@/api/system-config/account-manage'
import PasswordForm from './password-form'
export default {
  name: 'UserInfoForm',
  components: {
    LinkBtn,
    PasswordForm
  },
  props: {
    toggle: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default () {
        return {
          status: 'add',
          row: {}
        }
      }
    }
  },
  data () {
    return {
      showModal: false,
      setTabsOptions: [
        { label: '基本设置', desc: '个人账户信息设置', key: 'base' },
        { label: '安全设置', desc: '个人账户密码设置', key: 'security' }
      ],
      settingsTabs: 'base',
      selfForm: {
        userAccount: '',
        userName: ''
      },
      selfFormRules: {
        userAccount: [
          { required: true, message: '账号不能为空！', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '用户名不能为空！', trigger: 'change' }
        ]
      },
      showPwdFormModal: false
    }
  },
  computed: {
    info () {
      return this.$store.state.user.info
    }
  },
  watch: {
    toggle (newVal) {
      this.showModal = newVal
      if (newVal) {
        this.selfForm = {
          userAccount: this.info.userAccount,
          userName: this.info.userName
        }
      }
    },
    settingsTabs (newVal) {
      if (newVal === 'base') {
        this.selfForm = {
          userAccount: this.info.userAccount,
          userName: this.info.userName
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    // 设置tabs
    setTabs (item) {
      this.settingsTabs = item.key
    },
    // 修改密码弹窗
    showPwdForm () {
      this.showPwdFormModal = true
    },
    // 确定
    saveFormData (formRef) {
      this.$refs[formRef].validate((valid) => {
        if (valid) {
          // let params = {
          //   userId: this.info.userId,
          //   userName: this.selfForm.userName
          // }
          // accountMgtUpdate(params).then(res => {
          //   if (res.data.error !== 0) {
          //     this.$Message.error(res.data.info)
          //   } else {
          //     this.$Message.success(res.data.info)
          //     setTimeout(() => {
          //       window.location.reload()
          //     }, 300)
          //   }
          // }).catch(err => {
          //   console.log('err', err)
          // })
        }
      })
    },
    // 取消
    cancelModal (formRef) {
      this.settingsTabs = 'base'
      // this.$refs[formRef].resetFields()
      this.$emit('update:toggle', false)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/style/main-panel.styl'

.self-settings-modal
  .set-panel
    display flex
    &:after
      content ''
      display block
      clear both
  .set-options
    // float left
    width 250px
    .self-set-list-item
      cursor pointer
      padding 10px 10px
      transition all .2s linear
      &:hover
        background #eee
      &.active
        background #eee
        color #2d8cf0
      .self-set-list-item-title
        font-weight bold
  .set-content
    // float right
    flex-grow 1
    margin-left 16px
    max-height 60vh
    height 60vh
    overflow-y auto
  .set-block
    .main-title
      font-size 20px
      font-weight bold
    .main-title-desc
      font-size 14px
  .settings-form
    margin-top 20px
    max-width 400px
  .security-panel
    // margin-top 20px
    // max-width 500px
    .security-panel-item
      font-size 14px
      border-bottom 1px solid #ddd
      padding 16px 16px 0px
      .security-panel-item-title
        font-weight bold
      .security-panel-item-content
        margin-top 10px
        margin-bottom 20px
        &:after
          content ''
          display block
          clear both
        .security-panel-item-desc
          float left
        .btn-group
          float right
</style>
